<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-container>
    <el-header height="70px" style="background-color: #386582;line-height: 70px">
      <h1 style="color: white;font-size: 30px;margin: 0">
        烘焙坊后台管理系统
        <span style="float: right;font-size: 20px">欢迎{{user.nickname}}回来!
          <a href="" style="color: orange;text-decoration: none" @click="logout()">退出登录</a>
        </span>
      </h1>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu @select="handleSelect" active-text-color="orange" default-active="1">
          <img src="imgs/icon.png" style="margin-top: 10px" width="150px">
          <el-divider></el-divider>
          <el-menu-item index="1"><i class="el-icon-user"> 用户管理</i></el-menu-item>
          <el-menu-item index="2"><i class="el-icon-picture"> 轮播图</i></el-menu-item>
          <el-menu-item index="3"><i class="el-icon-s-order"> 烘焙食谱</i></el-menu-item>
          <el-menu-item index="4"><i class="el-icon-video-camera"> 烘焙视频</i></el-menu-item>
          <el-menu-item index="5"><i class="el-icon-info"> 行业资讯</i></el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-table v-if="currentIndex==1" :data="userArr">
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column prop="username" label="用户名"></el-table-column>
          <el-table-column prop="nickname" label="昵称"></el-table-column>
          <el-table-column label="头像">
            <template slot-scope="scope">
              <el-avatar :src="scope.row.imgUrl"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column label="管理员">
            <template slot-scope="scope">
              <el-switch :disabled="user.id==scope.row.id" v-model="scope.row.isAdmin" @change="handleChange(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
             <el-button :disabled="user.id==scope.row.id" type="danger"
                        @click="deleteUser(scope.$index,scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="currentIndex==2" :data="bannerArr">
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column label="轮播图片">
            <template slot-scope="scope">
              <img :src="scope.row.imgUrl" width="200">
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" @click="deleteBanner(scope.$index,scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="currentIndex>2" :data="contentArr">
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column label="封面" width="70">
            <template slot-scope="scope">
              <img :src="scope.row.imgUrl" width="60px">
            </template>
          </el-table-column>
          <el-table-column prop="brief" label="摘要" width="400"></el-table-column>
          <el-table-column prop="categoryName" label="分类" width="70"></el-table-column>
          <el-table-column prop="viewCount" label="浏览量" width="70"></el-table-column>
          <el-table-column prop="commentCount" label="评论量" width="70"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="success"
                          @click="editContent(scope.$index,scope.row)">编辑</el-button>
              <el-button size="mini" type="danger"
                         @click="deleteContent(scope.$index,scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios框架-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        userArr:[],
        bannerArr:[],
        contentArr:[],
        currentIndex:"1",
        user:localStorage.user?JSON.parse(localStorage.user):null
      }
    },
    methods:{
      logout(){
        if (confirm("您确认退出登录吗?")){
          axios.get("/v1/users/logout").then(function (response) {
            location.href="/login.html";
          })
        }
      },
      editContent(i,c){
        location.href = "/post.html?type="+c.type+"&id="+c.id;
      },
      handleChange(user){
        //  把这次请求用到的参数封装到对象中 提交给服务器
        let u = {id:user.id,isAdmin:user.isAdmin?1:0};
        axios.post("/v1/users/change",u)
                .then(function (response) {
          if (response.data.code==1){
            if (user.isAdmin){
              v.$message.success("设置"+user.nickname+"为管理员!");
            }else{
              v.$message.success("取消"+user.nickname+"的管理员状态!");
            }
          }
        })
      },
      handleSelect(key,keyPath){
        v.currentIndex = key;
        if (key>2){
          //key 3 4 5   type 1 2 3
          let type = key-2;
          axios.get("/v1/contents/"+type+"/list/admin").then(function (response) {
            if (response.data.code==1){
              v.contentArr = response.data.data;
            }
          })
        }
      },
      deleteUser(i,user){
        if (confirm("您确认删除"+user.nickname+"吗?")){
          axios.post("/v1/users/"+user.id+"/delete").then(function (response) {
            if (response.data.code==1){
                v.userArr.splice(i,1);
            }
          })
        }
      },
      deleteBanner(i,banner){
        if (confirm("您确认删除此轮播图吗?")){
          axios.post("/v1/banners/"+banner.id+"/delete").then(function (response) {
            if (response.data.code==1){
              v.bannerArr.splice(i,1);
            }
          })

        }
      },
      deleteContent(i,c){
        if (confirm("您确认删除此内容吗?")){
          axios.post("/v1/contents/"+c.id+"/delete").then(function (response) {
            if (response.data.code==1){
              v.contentArr.splice(i,1);
            }
          })
        }
      }
    },
    created:function () {
      //请求用户数据
      axios.get("/v1/users/").then(function (response) {
        if (response.data.code==1){
          v.userArr = response.data.data;
        }
      })
      //请求轮播图数据
      axios.get("/v1/banners/list/admin").then(function (response) {
        if (response.data.code==1){
          v.bannerArr = response.data.data;
        }
      })

    }
  })
</script>
</html>